<!-- 首页 -->
<template>
    <view class="home-wrap u-m-b-20">
        <shopro-navbar :isBack="false">
            <text
                slot="content"
                style="color: #000; width: 100%; text-align: center;padding-left: 20rpx;font-size:30rpx"
                @click="userInfo.password?'':denglu()"
            >
                {{'深圳科技信息职业技术学院'}}
            </text>
        </shopro-navbar>
        <view class="content-box u-p-20 u-m-l-20 u-m-r-20">
            <!--            报表-->
            <view class="u-flex u-flex-col u-p-20 u-m-t-40 baobiao-item u-row-left u-col-top">
                <view class="u-flex u-col-center u-row-between u-w-50s u-h-100">
                    <view class="u-flex u-col-center u-row-left">
                        <view class="u-m-r-10 biaoshi" ></view>
                        <view class="u-m-l-14" style="font-size: 24rpx">学校人数占比</view>
                        <view class="right-arrow"></view>
                    </view>
                    <!--                    <view class="u-flex u-flex-col u-row-left u-col-center" style="font-size:24rpx;border: 1rpx solid #2A6CFF;border-radius: 10rpx" @click="showriqi = true">-->
                    <!--                        <view class="time-day u-flex u-row-center">{{day}}</view>-->
                    <!--                        <view class="time-month u-flex u-row-center">{{month}}</view>-->
                    <!--                    </view>-->
                </view>
                <view v-show="!showriqi" class="u-flex u-w-100s u-row-between top-yuangong u-p-t-20 u-p-b-20" style="position:relative;">

                    <view class="lenged u-flex u-flex-col">
                        <view class="wancheng u-flex u-row-center u-col-top">
                            <view class="miaoshu">
                                <view class="u-m-b-8 u-flex u-row-center" style="font-size: 28rpx;font-weight: bold">3901</view>
                                <view class="u-flex u-row-between timu">男生人数</view>
                            </view>
                        </view>
                        <view class="wancheng u-flex u-row-center u-col-top">
                            <view class="miaoshu">
                                <view class=" u-m-b-8 u-flex u-row-center" style="font-size: 28rpx;font-weight: bold">1909</view>
                                <view class="u-flex timu u-row-between" >女生人数</view>
                            </view>
                        </view>
                    </view>
                    <view class="chart-content" style="width: 100%;height: 200rpx">
                        <uni-ec-canvas class="uni-ec-canvas-nannv" id="uni-ec-canvas-nannv" ref="canvas_nannv" canvas-id="uni-ec-canvas-nannv" :ec="ec">
                        </uni-ec-canvas>
                    </view>
                </view>
            </view>
            <!--            全校体测结果-->
            <view class="u-flex u-flex-col u-p-20 u-m-t-40 yuangong-item u-col-top">
                <view class="u-flex u-col-center u-row-left u-w-50s u-h-100">
                    <view class="u-flex u-col-center u-row-left">
                        <view class="u-m-r-10 biaoshi" ></view>
                        <view class="u-m-l-14" style="font-size: 24rpx">全校体测结果</view>
                        <view class="right-arrow"></view>
                    </view>
                </view>
                <view class="u-flex u-w-100s u-row-between top-yuangong u-p-20">
                    <view class="u-flex u-flex-col u-row-left u-col-center">
                        <view class="topnum">{{ homeData.total_staff }}</view>
                        <view class="topname">参与人数</view>
                    </view>
                    <view class="u-flex u-flex-col u-row-left u-col-center">
                        <view class="topnum">{{homeData.new_phone}}</view>
                        <view class="topname">参与率</view>
                    </view>
                    <view class="u-flex u-flex-col u-row-left u-col-center">
                        <view class="topnum">{{ homeData.new_msg }}</view>
                        <view class="topname">平均分</view>
                    </view>
                </view>
                <view class="u-flex u-w-100s u-row-between top-yuangong u-p-20">
                    <view class="u-flex u-flex-col u-row-left u-col-center">
                        <view class="topnum">{{ homeData.total_staff }}</view>
                        <view class="topname">合格人数</view>
                    </view>
                    <view class="u-flex u-flex-col u-row-left u-col-center">
                        <view class="topnum">{{homeData.new_phone}}</view>
                        <view class="topname">合格率</view>
                    </view>
                    <view class="u-flex u-flex-col u-row-left u-col-center">
                        <view class="topnum">{{ homeData.new_msg }}</view>
                        <view class="topname">最高分</view>
                    </view>
                </view>
            </view>

            <!--            报表-->
            <view class="u-flex u-flex-col u-p-20 u-m-t-40 baobiao-item u-row-left u-col-top">
                <view class="u-flex u-col-center u-row-between u-w-50s u-h-100">
                    <view class="u-flex u-col-center u-row-left">
                        <view class="u-m-r-10 biaoshi" ></view>
                        <view class="u-m-l-14" style="font-size: 24rpx">院系合格占比</view>
                        <view class="right-arrow"></view>
                    </view>
                </view>
                <view v-show="!showriqi" class="u-flex u-w-100s u-row-between top-yuangong u-p-t-20 u-p-b-20" style="position:relative;">
                    <view class="chart-content" style="width: 100%;height: 400rpx">
                        <uni-ec-canvas class="uni-ec-canvas-hegelv" id="uni-ec-canvas-hegelv" ref="canvas_hegelv" canvas-id="uni-ec-canvas-hegelv" :ec="ec">
                        </uni-ec-canvas>
                    </view>
                </view>
            </view>

            <!--            报表-->
            <view class="u-flex u-flex-col u-p-20 u-m-t-40 baobiao-item u-row-left u-col-top">
                <view class="u-flex u-col-center u-row-between u-w-50s u-h-100">
                    <view class="u-flex u-col-center u-row-left">
                        <view class="u-m-r-10 biaoshi" ></view>
                        <view class="u-m-l-14" style="font-size: 24rpx">男生各项目平均分与等级</view>
                        <view class="right-arrow"></view>
                    </view>
                </view>
                <view v-show="!showriqi" class="u-flex u-w-100s u-row-between top-yuangong u-p-t-20 u-p-b-20" style="position:relative;">
                    <view class="chart-content" style="width: 100%;height: 400rpx">
                        <uni-ec-canvas class="uni-ec-canvas-nanbar" id="uni-ec-canvas-nanbar" ref="canvas_nanbar" canvas-id="uni-ec-canvas-nanbar" :ec="ec">
                        </uni-ec-canvas>
                    </view>
                </view>
            </view>

            <!--            报表-->
            <view class="u-flex u-flex-col u-p-20 u-m-t-40 baobiao-item u-row-left u-col-top">
                <view class="u-flex u-col-center u-row-between u-w-50s u-h-100">
                    <view class="u-flex u-col-center u-row-left">
                        <view class="u-m-r-10 biaoshi" ></view>
                        <view class="u-m-l-14" style="font-size: 24rpx">女生各项目平均分与等级</view>
                        <view class="right-arrow"></view>
                    </view>
                </view>
                <view v-show="!showriqi" class="u-flex u-w-100s u-row-between top-yuangong u-p-t-20 u-p-b-20" style="position:relative;">
                    <view class="chart-content" style="width: 100%;height: 400rpx">
                        <uni-ec-canvas class="uni-ec-canvas-nvbar" id="uni-ec-canvas-nvbar" ref="canvas_nvbar" canvas-id="uni-ec-canvas-nvbar" :ec="ec">
                        </uni-ec-canvas>
                    </view>
                </view>
            </view>
            <u-calendar v-model="showriqi" :mode="mode" @change="changeDate"></u-calendar>
        </view>
    </view>
</template>

<script>

import {mapMutations, mapActions, mapState, mapGetters} from 'vuex';
import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
import * as echarts from 'echarts'

let chart = null
export default {
    components: {
        uniEcCanvas
    },
    data() {
        return {
            day:"12",
            month:"六月",
            ec        : {
                lazyLoad: true
            },
            showriqi:false,
            mode:'date',
            homeData:{},
            // 饼图
            nannvPieoptions: {
                series: [
                    {
                        name     : 'Access From',
                        type     : 'pie',
                        // radius   : ['70%', '90%'],
                        center   : ['65%', '50%'],
                        label: {
                            show: true,
                            position: 'top',
                            valueAnimation: true,
                            formatter:  '{c}'
                        },
                        labelLine: {
                            show: true
                        },
                        emphasis : {
                            label: {
                                show: true
                            }
                        },
                        itemStyle:{
                            borderRadius:20
                        },
                        data     : [
                            {
                                value    : 35, name: '男',
                                itemStyle: {
                                    color       : {
                                        x         : 0,
                                        y         : 0,
                                        x2        : 0,
                                        y2        : 1,
                                        global    : true,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color : '#31A4FF'
                                            },
                                            {
                                                offset: 1,
                                                color : '#2A6CFF'
                                            }
                                        ]
                                    },
                                    borderRadius: 15
                                }
                            },
                            {
                                value    : 20, name: '女',
                                itemStyle: {
                                    color       : {
                                        x         : 0,
                                        y         : 0,
                                        x2        : 0,
                                        y2        : 1,
                                        global    : true,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color : '#FEC737'
                                            },
                                            {
                                                offset: 1,
                                                color : '#FE8109'
                                            }
                                        ]
                                    },
                                    borderRadius: 15
                                },
                            }
                        ],
                        // 鼠标移上去的item不会凸出了
                        hoverAnimation: false,
                    }
                ]
            },
            labelOption :{
                show: true,
                position: 'inside',
                formatter: '{c}%',
                color:'#fff'
            },
        //     常规饼图

        //    院系合格占比
            hegelvDataX: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            hegelvData:[

                {
                    name: 'Baidu',
                    type: 'bar',
                    stack: 'Search Engine',
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                        show: true,
                        position: 'inside',
                        formatter: '{c}%',
                        color:'#fff'
                    },
                    data: [620, 732, 701, 734, 1090, 1130, 1120]
                },
                {
                    name: 'Google',
                    type: 'bar',
                    stack: 'Search Engine',
                    label: {
                        show: true,
                        position: 'inside',
                        formatter: '{c}%',
                        color:'#fff'
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [120, 132, 101, 134, 290, 230, 220]
                },
                {
                    name: 'Bing',
                    type: 'bar',
                    stack: 'Search Engine',
                    label: {
                        show: true,
                        position: 'inside',
                        formatter: '{c}%',
                        color:'#fff'
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [60, 72, 71, 74, 190, 130, 110]
                },
                {
                    name: 'Others',
                    type: 'bar',
                    stack: 'Search Engine',
                    label: {
                        show: true,
                        position: 'inside',
                        formatter: '{c}%',
                        color:'#fff'
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [62, 82, 91, 84, 109, 110, 120]
                }
            ],
        //     男生各项占比
            man_levelProjectData:[
                [
                    4.6, 6.9, 9.0, 26.4, 28.7, 70.7, 175.6, 112.2, 48.7, 18.8, 6.0, 2.3
                ],
                [
                    2.6, 5.9, 9.0, 56.4, 28.7, 70.7, 175.6, 82.2, 48.7, 18.8, 6.0, 2.3
                ],[
                    9.6, 7.9, 12.0, 26.4, 28.7, 70.7, 175.6, 142.2, 48.7, 18.8, 6.0, 2.3
                ]
            ],
            man_levelProjectX: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            woman_levelProjectData:[
                [
                    4.6, 6.9, 9.0, 26.4, 28.7, 70.7, 175.6, 112.2, 48.7, 18.8, 6.0, 2.3
                ],
                [
                    2.6, 5.9, 9.0, 56.4, 28.7, 70.7, 175.6, 82.2, 48.7, 18.8, 6.0, 2.3
                ],[
                    9.6, 7.9, 12.0, 26.4, 28.7, 70.7, 175.6, 142.2, 48.7, 18.8, 6.0, 2.3
                ]
            ],
            woman_levelProjectX: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        //     女生各项占比

        };
    },
    computed: {
        ...mapGetters(['isLogin','userInfo']),
        hegulvChartOption() {
            return {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    type: 'scroll',
                },
                grid: {
                    top:'15%',
                    left: '3%',
                    right: '4%',
                    bottom: '-3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: this.hegelvDataX,
                        axisLine: {
                            lineStyle: { color: '', width:1, height: 1 } // x轴
                        },
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLine  : {
                            lineStyle: {color: 'rgb(215,217,217)', width: 0, height: 0} // y轴
                        },
                    }
                ],
                series:this.hegelvData
            }
        },
        //  男生各项目平均分与等级
        manClassScoreData(){
            return {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                grid:{
                    top:'22%',
                    x2:50
                },
                legend: {
                    data: ['分数', '合格率', '优良率']
                },
                xAxis: [
                    {
                        type: 'category',
                        data: this.man_levelProjectX,
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '分数',
                        min: 0,
                        max: 250,
                        interval: 50,
                        axisLabel: {
                            formatter: '{value} 分'
                        }
                    },
                    {
                        type: 'value',
                        name: '比率',
                        min: 0,
                        max: 25,
                        interval: 5,
                        axisLabel: {
                            formatter: '{value} %'
                        }
                    }
                ],
                series: [
                    {
                        name: '分数',
                        type: 'bar',
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' 分';
                            }
                        },
                        barWidth:20,
                        data: this.man_levelProjectData[0]
                    },
                    {
                        name: '合格率',
                        type: 'line',
                        barWidth:20,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' 分';
                            }
                        },
                        data: this.man_levelProjectData[1]
                    },
                    {
                        name: '优良率',
                        type: 'line',
                        yAxisIndex: 1,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' %';
                            }
                        },
                        data:this.man_levelProjectData[2]
                    }
                ]
            };
        },
        //   女生各项目平均分与等级
        womanClassScoreData(){
            return {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                grid:{
                    top:'25%',
                    x2:50
                },
                legend: {
                    data: ['分数', '合格率', '优良率']
                },
                xAxis: [
                    {
                        type: 'category',
                        data: this.woman_levelProjectX,
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '分数',
                        min: 0,
                        max: 250,
                        interval: 50,
                        axisLabel: {
                            formatter: '{value} 分'
                        }
                    },
                    {
                        type: 'value',
                        name: '比率',
                        min: 0,
                        max: 25,
                        interval: 5,
                        axisLabel: {
                            formatter: '{value} %'
                        }
                    }
                ],
                series: [
                    {
                        name: '分数',
                        type: 'bar',
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' 分';
                            }
                        },
                        barWidth:20,
                        data: this.woman_levelProjectData[0]
                    },
                    {
                        name: '合格率',
                        type: 'line',
                        barWidth:20,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' 分';
                            }
                        },
                        data: this.woman_levelProjectData[1]
                    },
                    {
                        name: '优良率',
                        type: 'line',
                        yAxisIndex: 1,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' %';
                            }
                        },
                        data:this.woman_levelProjectData[2]
                    }
                ]
            };
        }
    },
    onPullDownRefresh() {

    },

    onShow() {

    },
    onHide() {

    },
    onLoad(options) {
        this.$refs.canvas_nannv.init(this.initNannvChart)
        this.$refs.canvas_hegelv.init(this.initChartHegelv)
        this.$refs.canvas_nanbar.init(this.initChartNanBar)
        this.$refs.canvas_nvbar.init(this.initChartNvBar)

        if(this.$Route.query.id){
            uni.setStorageSync('fid', this.$Route.query.id);
        }
        this.init()

    },
    methods: {
        // 初始化
        init() {
            let day = new Date().getDate();
            let month = new Date().getMonth()+1;
            console.log("===day",day,month)
            this.day = day
            this.getmonth(month)
            this.initdata()
        },
        changeDate(e){
            console.log("====e",e)
            this.day = e.day
            this.getmonth(e.month)
        },
        getmonth(month){
            switch (month) {
                case 1 :
                    this.month = '一月'
                    break;
                case 2 :
                    this.month = '二月'
                    break
                case 3 :
                    this.month = '三月'
                    break
                case 4 :
                    this.month = '四月'
                    break
                case 5 :
                    this.month = '五月'
                    break
                case 6 :
                    this.month = '六月'
                    break
                case 7 :
                    this.month = '七月'
                    break
                case 8 :
                    this.month = '八月'
                    break;
                case 9 :
                    this.month = '九月'
                    break;
                case 10 :
                    this.month = '十月'
                    break;
                case 11 :
                    this.month = '十一月'
                    break;
                case 12 :
                    this.month = '十二月'
                    break;


            }
        },
        initChartHegelv(canvas, width, height, canvasDpr) {
            console.log(canvas, width, height, canvasDpr)
            chart = echarts.init(canvas, null, {
                width           : width,
                height          : height,
                devicePixelRatio: canvasDpr
            })
            canvas.setChart(chart)
            chart.setOption(this.hegulvChartOption)
            return chart
        },
        initNannvChart(canvas, width, height, canvasDpr) {
            console.log(canvas, width, height, canvasDpr)
            chart = echarts.init(canvas, null, {
                width           : width,
                height          : height,
                devicePixelRatio: canvasDpr
            })
            canvas.setChart(chart)
            chart.setOption(this.nannvPieoptions)
            return chart
        },
        initChartNanBar(canvas, width, height, canvasDpr) {
            console.log(canvas, width, height, canvasDpr)
            chart = echarts.init(canvas, null, {
                width           : width,
                height          : height,
                devicePixelRatio: canvasDpr
            })
            canvas.setChart(chart)
            chart.setOption(this.manClassScoreData)
            return chart
        },
        initChartNvBar(canvas, width, height, canvasDpr) {
            console.log(canvas, width, height, canvasDpr)
            chart = echarts.init(canvas, null, {
                width           : width,
                height          : height,
                devicePixelRatio: canvasDpr
            })
            canvas.setChart(chart)
            chart.setOption(this.womanClassScoreData)
            return chart
        },
        denglu() {
            this.$store.dispatch("showAuthModal", "1233");
        },
        initdata(){
            let that = this;
            that
                .$http(
                    "login.home",
                    {
                    },
                    "加载中..."
                )
                .then(res => {
                    if (res.code === 1) {
                        this.homeData = res.data
                        // this.hegelvDataX = this.analysisData.hegelv.data
                        // this.hegelvData = this.analysisData.hegelv.series
                    }
                });
        },
        // 路由跳转
        jump(path, parmas) {
            console.log("====1111", path)
            this.$Router.push({
                path : path,
                query: parmas
            });
        },
    }
};
</script>

<style lang="scss" scoped>
.uni-ec-canvas {
    width: 100%;
    height: 400rpx;
    display: block;
}
.uni-ec-canvas-bing {
    width: 100%;
    height: 200rpx;
    display: block;
}
.uni-ec-canvas-hegelv {
    width: 100%;
    height: 400rpx;
    display: block;
}
.home-wrap {
    background: #F5F5F5!important;
}

.yuangong-item {
    background: #fff;
    box-shadow: 0px 2px 4px 0px rgba(53, 110, 253, 0.05);
    border-radius: 20rpx;

    .topnum {
        font-size: 30rpx;
        margin-bottom: 10rpx;
    }

    .topname {
        font-size: 24rpx;
        color: #999999;
    }
}

.baobiao-item {
    background: #fff;
    border-radius: 30rpx;
    padding: 20rpx;
    .time-day {
        width: 100rpx;
        background: #2A6CFF;
        color: #fff;
        padding: 6rpx 8rpx;
    }

    .time-month {
        width: 100rpx;
        background: #fff;
        box-shadow: 0px 2px 4px 0px rgba(53,110,253,0.05);
        border-radius: 10rpx;
        color: #1989fa;
        padding: 6rpx 8rpx;
    }
}
.lenged{
    position: absolute;
    top: 16rpx;
    left: -22rpx;
    width: 26vw;
    padding: 10rpx 18rpx;
    .wancheng{
        width: 100%;
        .timu{
            color: #999;
        }
    }
}
::v-deep .u-drawer{
    z-index: 1110000!important;
}
.u-h-100{
    background: #3FA897;
    color:#fff;
    position: relative;
    .biaoshi{
        position: absolute;
        left: 0;
        bottom: -24rpx;
        width: 0px;
        height: 0px;
        border-top: 14rpx solid #067664;
        border-right: 14rpx solid #067664;
        border-bottom: 14rpx solid transparent;
        border-left: 14rpx solid transparent;
    }
    .right-arrow{
        position: absolute;
        right: 0;
        bottom: 0rpx;
        width: 0px;
        height: 0px;
        border-top: 40rpx solid #3FA897;
        border-right: 40rpx solid #fff;
        border-bottom: 40rpx solid #3FA897;
        border-left: 40rpx solid #3FA897;
    }
}
</style>
